import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:movie_app_demo/models/movie.dart';

import '../../../constants.dart';

class BackdropAndRating extends StatelessWidget {
  const BackdropAndRating({
    Key key,
    @required this.size,
    @required this.movie,
  }) : super(key: key);

  final Size size;
  final Movie movie;

  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(
      delegate: DetailSliverDelegate(movie, size),
    );
    // return Container(
    //   height: size.height * 0.4,
    //   child:  Stack(
    //     children: <Widget>[
    //       Container(
    //         height: size.height * 0.4 - 50,
    //         decoration: BoxDecoration(
    //           borderRadius: BorderRadius.only(bottomLeft: Radius.circular(50)),
    //           image: DecorationImage(
    //             fit: BoxFit.cover,
    //             image: AssetImage(movie.backdrop),
    //           ),
    //         ),
    //       ),
    //       Positioned(
    //         bottom: 0,
    //         right: 0,
    //         child: Container(
    //           width: size.width * 0.9,
    //           height: 100,
    //           decoration: BoxDecoration(
    //             color: Colors.white,
    //             borderRadius: BorderRadius.only(
    //                 bottomLeft: Radius.circular(50),
    //                 topLeft: Radius.circular(50)),
    //             boxShadow: [
    //               BoxShadow(
    //                   offset: Offset(0, 5),
    //                   blurRadius: 50,
    //                   color: Color(0xFF12153D).withOpacity(0.2)),
    //             ],
    //           ),
    //           child: Row(
    //             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    //             children: <Widget>[
    //               Column(
    //                 mainAxisAlignment: MainAxisAlignment.center,
    //                 children: <Widget>[
    //                   SvgPicture.asset("assets/icons/star_fill.svg"),
    //                   SizedBox(height: kDefaultPadding / 4),
    //                   RichText(
    //                     text: TextSpan(
    //                       style: TextStyle(color: Colors.black),
    //                       children: [
    //                         TextSpan(
    //                           text: "${movie.rating}/",
    //                           style: TextStyle(
    //                               fontSize: 16, fontWeight: FontWeight.w600),
    //                         ),
    //                         TextSpan(text: "10\n"),
    //                         TextSpan(
    //                           text: "150,220",
    //                           style: TextStyle(color: kTextLightColor),
    //                         ),
    //                       ],
    //                     ),
    //                   ),
    //                 ],
    //               ),
    //               Column(
    //                 mainAxisAlignment: MainAxisAlignment.center,
    //                 children: <Widget>[
    //                   SvgPicture.asset("assets/icons/star.svg"),
    //                   SizedBox(height: kDefaultPadding / 4),
    //                   Text(
    //                     "Rate this",
    //                     style: Theme.of(context).textTheme.bodyText2,
    //                   ),
    //                 ],
    //               ),
    //               Column(
    //                 mainAxisAlignment: MainAxisAlignment.center,
    //                 children: <Widget>[
    //                   Container(
    //                     padding: EdgeInsets.all(6),
    //                     decoration: BoxDecoration(
    //                       color: Color(0xFF51CF66),
    //                       borderRadius: BorderRadius.circular(2),
    //                     ),
    //                     child: Text(
    //                       "${movie.metascoreRating}",
    //                       style: TextStyle(
    //                           fontSize: 16,
    //                           color: Colors.white,
    //                           fontWeight: FontWeight.w500),
    //                     ),
    //                   ),
    //                   SizedBox(
    //                     height: kDefaultPadding / 4,
    //                   ),
    //                   Text(
    //                     "Metascore",
    //                     style: TextStyle(
    //                         fontSize: 16, fontWeight: FontWeight.w500),
    //                   ),
    //                   Text(
    //                     "62 critic reviews",
    //                     style: TextStyle(color: kTextLightColor),
    //                   ),
    //                 ],
    //               )
    //             ],
    //           ),
    //         ),
    //       ),
    //       SafeArea(
    //         child: BackButton(),//返回按键
    //       ),
    //     ],
    //   ),
    // );
  }
}

class DetailSliverDelegate extends SliverPersistentHeaderDelegate {
  //控件当滚动到边缘时根据滚动的距离缩小高度
  final Size size;
  final Movie movie;
  DetailSliverDelegate(
    this.movie,
    this.size,
  );

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.dark,
          statusBarBrightness: Brightness.dark),
      child: Container(
        height: size.height * 0.4,
        child: Stack(
          children: <Widget>[
            Container(
              height: size.height * 0.4 - 50,
              decoration: BoxDecoration(
                borderRadius:
                    BorderRadius.only(bottomLeft: Radius.circular(50)),
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage(movie.backdrop),
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Container(
                width: size.width * 0.9,
                height: 100,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(50),
                      topLeft: Radius.circular(50)),
                  boxShadow: [
                    BoxShadow(
                        offset: Offset(0, 5),
                        blurRadius: 50,
                        color: Color(0xFF12153D).withOpacity(0.2)),
                  ],
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        SvgPicture.asset("assets/icons/star_fill.svg"),
                        SizedBox(height: kDefaultPadding / 4),
                        RichText(
                          text: TextSpan(
                            style: TextStyle(color: Colors.black),
                            children: [
                              TextSpan(
                                text: "${movie.rating}/",
                                style: TextStyle(
                                    fontSize: 16, fontWeight: FontWeight.w600),
                              ),
                              TextSpan(text: "10\n"),
                              TextSpan(
                                text: "150,220",
                                style: TextStyle(color: kTextLightColor),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        SvgPicture.asset("assets/icons/star.svg"),
                        SizedBox(height: kDefaultPadding / 4),
                        Text(
                          "Rate this",
                          style: Theme.of(context).textTheme.bodyText2,
                        ),
                      ],
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(6),
                          decoration: BoxDecoration(
                            color: Color(0xFF51CF66),
                            borderRadius: BorderRadius.circular(2),
                          ),
                          child: Text(
                            "${movie.metascoreRating}",
                            style: TextStyle(
                                fontSize: 16,
                                color: Colors.white,
                                fontWeight: FontWeight.w500),
                          ),
                        ),
                        SizedBox(
                          height: kDefaultPadding / 4,
                        ),
                        Text(
                          "Metascore",
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.w500),
                        ),
                        Text(
                          "62 critic reviews",
                          style: TextStyle(color: kTextLightColor),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
            SafeArea(
              child: BackButton(), //返回按键
            ),
          ],
        ),
      ),
    );
  }

  @override
  double get maxExtent => size.height * 0.4;

  @override
  double get minExtent => 0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}
